<template>
    <div class="info-container">
        <div class="title-Wrap">
            <p class="title">请选择事故信息</p>
        </div>
        <div class="info-rows">
            <div class="info-name">车辆信息</div>
            <div class="btn-wrap">
                <span @click="chooseCar(0)" :class="{btnSel:params.isDriverSelf === 0}" class="common-btn">本人车辆</span>
                <span @click="chooseCar(1)" :class="{btnSel:params.isDriverSelf === 1}" class="common-btn">他人车辆</span>
            </div>
        </div>
        <div class="info-rows">
            <div class="add-border-top-bottom">
                <div class="info-name">涉及车辆数</div>
                <div class="btn-wrap">
                    <span @click="chooseNum(0)" :class="{btnSel:params.accidentType === 0}" class="common-btn">两车</span>
                    <span @click="chooseNum(1)" :class="{btnSel:params.accidentType === 1}" class="common-btn">多车或伤亡</span>
                </div>
            </div>
        </div>
        <div class="info-rows">
            <div class="info-name">是否需要拖车</div>
            <div class="btn-wrap">
                <span @click="chooseTrail(0)" :class="{btnSel:params.isTruck===0}" class="common-btn">是</span>
                <span @click="chooseTrail(1)" :class="{btnSel:params.isTruck===1}" class="common-btn">否</span>
            </div>
        </div>
        <div class="title-Wrap">
            <p class="title">请输入您的信息</p>
        </div>
        <div class="info-rows">
            <div class="info-name">姓名</div>
            <input v-model="params.appliName" class="input_a" type="text" placeholder="请输入您的姓名">
        </div>
        <div class="info-rows">
            <div class="add-border-top-bottom">
                <div class="info-name">手机号码</div>
                <input maxlength="11" v-model="params.appliMobile" class="input_a" type="tel" placeholder="请输入您的手机号">
            </div>            
        </div>
        <div class="info-rows">
            <div class="info-name">验证码</div>
            <div class="funWrap">
                <input maxlength="4" v-model="params.code" type="tel" placeholder="请任意输入4位数字">
                <span @click="getCode" class="common-btn">{{codeTxt}}</span>
            </div>
        </div>
        <div class="next-btn">
            <mu-button @click="nextStep" :disabled="btnState" :large="true"  full-width color="#6794F5">下一步</mu-button>
        </div>
    </div>
</template>
<script>
    import api from '../../api/index.js';
    import {http} from '../../utils/request.js';
    import {getLocationInfo} from '../../utils/commonUtil.js';
    export default {
        name: "accidentInfo",
        data() {
            return {
                params: {
                    accidentType: 0, //事故类型
                    isDriverSelf:0,//是否本人驾驶
                    isTruck: 1, //是否拖车
                    appliName: '', //报案姓名
                    appliMobile: '',  //报案手机
                    accidentProvince: '', //省
                    accidentCity: '', //市
                    accidentArea: '',  //所在区
                    accidentWhere: '',
                    code: ''
                },
                codeTxt: "获取验证码",
                btnState: false,
                timeFlag: true
            }
        },
        mounted() {
            const locationInfo = getLocationInfo();
            //获取省信息
            this.params.accidentProvince = locationInfo.accidentProvince;
            //获取市信息
            this.params.accidentCity = locationInfo.accidentCity;
            //获取区
            this.params.accidentArea = locationInfo.accidentArea;
            //获取街道
            this.params.accidentWhere = locationInfo.accidentWhere;
        },
        created() {
            //修改title
            document.title = '基础信息';
        },
        methods: {
            /** 
             * 点击选择车辆信息
            */
            chooseCar(index) {
                if(index != this.params.isDriverSelf) {
                    this.params.isDriverSelf = index;
                }
            },
             /** 
             * 点击选择涉及车辆数
            */
           chooseNum(index) {
               if(index != this.params.accidentType) {
                    this.params.accidentType = index;
                }
           },
           /** 
            * 是否拖车
           */
          chooseTrail(val) {
              this.params.isTruck = val;
          },
          nextStep() {
              console.log(this.params);
              //校验
              if(!this.checkFormat()) return;
              //设置按钮失效
              this.btnState = true;
              //保存报案信息
              this.saveAccidentInfo();
          },
          saveAccidentInfo() {
              //获取用户id
              http.post(api.API_SAVE_ACCIDENT_INFO,this.params).then(((res) => {
                 this.btnState = false;
                 if (res.code == "1") {
                     //todo
                     sessionStorage.setItem('accidentNo',res.resultObj);
                     if(this.params.accidentType=="1" || this.params.isTruck == '0') {
                        this.$router.push("/specialAc");
                     }else{
                        //  ==========================添加新的分支 zyl==========================================
                        const env = sessionStorage&&sessionStorage.getItem("env");
                        this.$router.push({
                            name:env&&env=="stg"?"accidentPicStg":"accidentPic",
                            query:{
                                accidentNo:res.resultObj
                            }
                        });
                     }
                     
                 }else {
                     this.$toast.message({
                     message: '保存失败，请稍后再试！',
                      color: '#F57979'
                  });
                 }
              })).catch((error) =>{
                  this.btnState = false;
                  console.log(error);
              });
          },
          //获取验证码
          getCode() {
              //防止重复提交
                if(!this.timeFlag) return;
                this.timeFlag = false;
                let NUM = 10;
                const timer = setInterval(()=>{
                    this.codeTxt = "重新发送("+ NUM + ")";
                    if(NUM==0) {
                        this.codeTxt = "重新发送";
                        this.timeFlag = true;
                        clearInterval(timer);
                    };
                    NUM--;
                },1000);
          },
          checkFormat() {
                var reg_mobile = /^1[3,4,5,6,7,8,9]\d{9}$/; // 校验电话号码格式
                if(this.params.appliName == '') {
                    this.$toast.message({
                        message: '请输入姓名',
                        color: '#F57979'
                    });
                    return false;
                }
                if(!reg_mobile.test(this.params.appliMobile)) {
                    this.$toast.message({
                        message: '请按照提示输入正确的手机号码',
                        color: '#F57979'
                    });
                    return false;
                };
                if(this.params.code.length!=4) {
                    this.$toast.message({
                        message: '请按照提示输入正确的验证码',
                        color: '#F57979'
                    });
                    return false;
                };
                return true;
            },
        }
    }
</script>
<style scoped lang="scss">
    @import "~assets/css/mixin.scss";
    .info-container {
        background-color: rgb(245, 246, 248);
        height: 100%;
        position: relative;
        // overflow: hidden;
    }
    .title {
        font-size: 0.12rem;
        font-weight: 0.17rem;
        color: #85898D;
        text-align: left;
    }
    .info-name {
        font-size: 0.17rem;
    }
    .btn-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 2rem;
    }
    .next-btn {
        font-size: rem(25);
        margin:rem(95) rem(15);
    }
    .add-border-top-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
        border-top: 1px #D8D8D8 solid;
        border-bottom: 1px #D8D8D8 solid;
    }
    .funWrap {
        width: 2.4rem;
        display: flex;
        justify-content: space-between;
    }
    .funWrap input {        
        width: 1.48rem;
        border: none;
        font-size: 0.17rem;
    }
</style>

